import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, ScrollView, Alert, Dimensions} from 'react-native';
import {Button, WhiteSpace, WingBlank, Flex, Carousel, List, Grid, Icon, Provider, Toast, Modal, Radio} from '@ant-design/react-native';
import {outlineGlyphMap} from '@ant-design/icons-react-native/lib/outline';
import {Card} from 'react-native-shadow-cards';
import Carouselcard from '~/components/carousel/Carouselcard';
import {judgeParkingState, saveParkingFavorite} from '~/api/parking';
import {getParkingDataInfo, getParkingPlanItemInfo} from '~/api/parking';
import {getParkingFavoriteInfo} from '~/api/parking';
import {saveSystem} from '~/store/system';
import {connect} from 'react-redux';
import {getOwnerHouseBuilding} from '~/api/owner';
import Suspensions from '~/pages/developer/publics/Susoension';
import {saveParkingView, getParkingAreaById, getNoticeByParkingId} from '~/api/parking';
import {saveParkOrder, initParkOrder} from '~/store/parkorder';
import SelectOwnerHouse from '~/components/parkinfo/selectownerhouse';
import moment from 'moment';
import {getHttpUrl} from '~/api/basic';

const RadioItem = Radio.RadioItem;

const mapGetter = (state) => {
    return {
        userinfo: state.userinfo,
        system: state.system,
        parkorder: state.parkorder,
    };
};

const mapSetter = (dispatch) => {
    return {
        onSave: (data) => {
            dispatch(saveSystem(data));
        },
        onparkSave: (data) => {
            dispatch(saveParkOrder(data));
        },
        initParkOrder: () => {
            dispatch(initParkOrder());
        },
    };
};

class ParkInfo extends Component {
    static navigationOptions = ({navigation}) => {
        return {
            title: '车位详情',
            headerRight: (
                <Flex
                    onPress={() => {
                        navigation.navigate('NavigatorTab');
                    }}
                    style={{marginRight: 10}}>
                    <Image style={{width: 27, height: 27}} source={require('~/assets/public/backhome.png')} />
                </Flex>
            ),
            headerTransparent: true,
        };
    };

    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);
        // 设置当前组件的属性
        this.state = {
            parkingid: this.props.navigation.getParam('parkingid'),
            parkinginfo: [],
            parkingplanitem: [],
            noticelist: [],
            houselist: [],

            favoritieschecked: false,
            favoritiescount: 0,

            houseselectvisible: false,
            ownerdataid: 0,

            imgurl: '',
            fileLong: 0,
            fileWide: 0,
            longwide: '',

            selectowner: false,
        };
        //获取公告
        getNoticeByParkingId(this.state.parkingid).then((r) => {
            if (r.code === 0) {
                let notlist = [];
                if (r.data.lstFavorite.length > 0) {
                    r.data.lstFavorite.forEach((item) => {
                        notlist.push(item);
                    });
                }
                if (r.data.lstOrderLog.length > 0) {
                    r.data.lstOrderLog.forEach((item) => {
                        notlist.push(item);
                    });
                }
                if (r.data.lstView.length > 0) {
                    r.data.lstView.forEach((item) => {
                        notlist.push(item);
                    });
                }
                this.setState({
                    noticelist: notlist,
                });
            }
        });

        getParkingDataInfo(this.state.parkingid).then((r) => {
            this.props.initParkOrder();
            if (r.code === 0) {
                this.setState({
                    parkinginfo: r.data,
                    favoritiescount: r.data.CountFavorities,
                });
                getParkingAreaById(r.data.ParkingAreaID).then((r) => {
                    if (r.code === 0) {
                        this.setState({
                            imgurl: r.data.httpHead + '/' + r.data.data.ParkingAreaID + '/' + r.data.data.FileName,
                            fileLong: r.data.data.FileLong,
                            fileWide: r.data.data.FileWide,
                            longwide: (r.data.data.FileLong / r.data.data.FileWide).toFixed(2),
                        });
                    }
                });
                this.getplanitem(r.data.ParkingPlanItemID);
            } else {
                Toast.info(r.msg + '1');
            }
        });
        if (this.props.userinfo.token != '' && this.props.userinfo.identity === 8) {
            getParkingFavoriteInfo(this.state.parkingid).then((r) => {
                if (r.code === 0) {
                    if (r.data != null) {
                        if (r.data.FavoriteState == 0) {
                            this.setState({
                                favoritieschecked: false,
                            });
                        } else {
                            this.setState({
                                favoritieschecked: true,
                            });
                        }
                    } else {
                        this.setState({
                            favoritieschecked: false,
                        });
                    }
                } else {
                    Toast.info(r.msg + '2');
                }
            });
            saveParkingView({
                parkingId: this.state.parkingid,
            }).then((r) => {
                if (r.code === 0) {
                } else {
                }
            });
        }
        this.onClose = () => {
            this.setState({
                houseselectvisible: false,
            });
        };
        this.seleonPress = () => {
            if (this.props.parkorder.ownerhouseid === 0) {
                getOwnerHouseBuilding(this.state.parkinginfo.CompanyBuildingID).then((r) => {
                    if (r.code === 0) {
                        if (r.data == '') {
                            this.props.navigation.push('Information', {
                                parkinginfo: this.state.parkinginfo,
                            });
                        } else {
                            this.setState(
                                {
                                    houseselectvisible: true,
                                },
                                () => {
                                    this.setState({
                                        selectowner: true,
                                    });
                                },
                            );
                        }
                    } else {
                        Toast.info(r.msg);
                    }
                });
            } else {
                this.props.navigation.push('Process');
            }
        };
        this.onPress = () => {
            if (this.props.userinfo.token != '') {
                this.setState(
                    {
                        favoritieschecked: !this.state.favoritieschecked,
                    },
                    () => {
                        this.getfavorite();
                    },
                );
            } else {
                this.props.navigation.push('Login');
            }
        };
        console.disableYellowBox = true;
    } //
    getfavorite() {
        saveParkingFavorite({
            parkingId: this.state.parkingid,
            state: this.state.favoritieschecked == true ? 1 : 0,
        }).then((r) => {
            this.state.favoritieschecked === true ? Toast.info('收藏成功', 1) : Toast.info('取消收藏', 1);
            this.setState({
                favoritiescount: this.state.favoritieschecked === true ? this.state.favoritiescount + 1 : this.state.favoritiescount - 1,
            });
        });
    }
    getplanitem(id) {
        getParkingPlanItemInfo(id).then((r) => {
            if (r.code === 0) {
                this.setState({
                    parkingplanitem: r.data,
                });
            }
        });
    }
    render() {
        const outlineData = Object.keys(outlineGlyphMap).map((item) => ({
            icon: <Icon name={item} />,
            text: item,
        }));
        const confirmorder = async (ownerhouseid) => {
            if (ownerhouseid > 0) {
                await this.props.onparkSave({
                    parkingid: this.state.parkingid,
                    ownerhouseid: ownerhouseid,
                    parkingplanid: this.state.parkingplanitem.ParkingPlanID,
                    parkingplanitemid: this.state.parkingplanitem.ParkingPlanItemID,
                    projectid: this.state.parkinginfo.ProjectDataID,
                    companybuildingid: this.state.parkinginfo.CompanyBuildingID,
                    parkinginfo: this.state.parkinginfo,
                    parkingplanitem: this.state.parkingplanitem,
                });
                judgeParkingState(this.props.parkorder.parkingid).then((r) => {
                    if (r.code === 0) {
                        this.onClose();
                        this.props.navigation.push('Process');
                    } else {
                        this.onClose();
                        Toast.info(r.msg);
                        this.props.navigation.push('ChangePark');
                    }
                });
            } else {
                Alert.alert('请选择个人信息');
            }
        };
        return (
            <View style={{width: '100%', height: '100%', backgroundColor: 'white'}}>
                <ScrollView>
                    {this.state.imgurl !== '' && (
                        <Image
                            style={{width: Dimensions.get('window').width, height: Dimensions.get('window').width * this.state.longwide}}
                            source={{uri: this.state.imgurl}}
                        />
                    )}
                    {this.state.fileWide > 0 && (
                        <View
                            style={{
                                width: 10,
                                height: 10,
                                borderRadius: 5,
                                backgroundColor:
                                    this.state.parkinginfo.state == '可售' ? 'green' : this.state.parkinginfo.state == '已售' ? 'red' : 'blue',
                                position: 'absolute',
                                left: (Dimensions.get('window').width / this.state.fileWide) * this.state.parkinginfo.ParkX,
                                top: (Dimensions.get('window').width / this.state.fileWide) * this.state.parkinginfo.ParkY,
                            }}
                        />
                    )}
                    <View style={styles.info}>
                        <View>
                            <Text style={{width: '100%', fontSize: 20, fontWeight: 'bold', color: '#333333'}}>
                                {this.state.parkinginfo.BuildingName}
                            </Text>
                        </View>
                        <Flex>
                            <Text style={{color: '#666666', fontSize: 12}}>
                                区域：<Text style={{color: '#333333', fontSize: 13}}>{this.state.parkinginfo.AreaName}</Text>
                            </Text>
                            <Text style={{paddingLeft: 5, paddingRight: 5, color: '#666666', fontSize: 12}}>|</Text>
                            <Text style={{color: '#666666', fontSize: 12}}>
                                车位号：<Text style={{color: '#333333', fontSize: 13}}>{this.state.parkinginfo.ParkingName}</Text>
                            </Text>
                        </Flex>

                        <Flex direction={'row'}>
                            <Text style={{color: '#EC4F46', fontSize: 13, marginBottom: -2}}>
                                {this.state.parkinginfo.PricePromotion > 0 ? '活动价' : '促销价'}
                            </Text>
                            <Text
                                style={{
                                    color: '#EC4F46',
                                    marginLeft: 5,
                                    fontSize: 20,
                                    marginBottom: 2,
                                }}>
                                {this.state.parkinginfo.PriceSell}
                            </Text>
                            <Text style={{color: '#EC4F46', fontSize: 13, marginBottom: -2}}> 元 </Text>
                            <Flex style={{marginTop: 2}}>
                                <Text style={{color: '#999999', fontSize: 11}}>原价</Text>
                                <Text
                                    style={{
                                        color: '#999999',
                                        fontSize: 11,
                                    }}>
                                    {this.state.parkinginfo.PriceMarket}
                                </Text>
                                <Text style={{color: '#999999', fontSize: 11}}>元</Text>
                            </Flex>
                            <Flex style={{width: '30%'}} justify={'end'}>
                                <Flex>
                                    <Image style={{width: 14, height: 14}} source={require('~/assets/parkinfo/guanzuh2x.png')} />
                                    <Text
                                        style={{
                                            marginLeft: 5,
                                            fontSize: 12,
                                        }}>
                                        {this.state.parkinginfo.CountView}
                                    </Text>
                                </Flex>
                                <Flex style={{marginLeft: 8}}>
                                    <Image style={{width: 14, height: 14}} source={require('~/assets/parkinfo/shoucang2x.png')} />
                                    <Text
                                        style={{
                                            marginLeft: 5,
                                            fontSize: 12,
                                        }}>
                                        {this.state.favoritiescount}
                                    </Text>
                                </Flex>
                            </Flex>
                        </Flex>
                        {this.state.parkinginfo.ParkingPlanItemID != 0 && (
                            <Flex>
                                <Text style={{color: '#333333', fontSize: 13}}>活动时间：</Text>
                                <Text style={{color: '#EC4F46', fontSize: 12}}>
                                    {moment(this.state.parkingplanitem.ValidBegin).format('YYYY-MM-DD HH:mm:ss')}
                                </Text>
                                <Text style={{color: '#EC4F46', fontSize: 12}}>---</Text>
                                <Text style={{color: '#EC4F46', fontSize: 12}}>
                                    {moment(this.state.parkingplanitem.ValidEnd).format('YYYY-MM-DD HH:mm:ss')}
                                </Text>
                            </Flex>
                        )}
                    </View>
                    {this.state.parkinginfo.ParkingPlanItemID != 0 && (
                        <Card style={{paddingTop: 10, paddingBottom: 10, margin: '4%', width: '92%', borderColor: '#F5F5F5'}}>
                            <View
                                style={{
                                    alignSelf: 'flex-start',
                                    backgroundColor: '#ec4f46',
                                    marginBottom: 10,
                                    height: 20,
                                    borderTopRightRadius: 10,
                                    borderBottomRightRadius: 10,
                                }}>
                                <Text style={{padding: 2, paddingLeft: 10, paddingRight: 20, color: 'white', fontSize: 12}}>该车位所享受的权益</Text>
                            </View>
                            <Flex justify={'around'} style={{paddingLeft: 5, paddingRight: 5}}>
                                {this.state.parkingplanitem.PayLoan === 1 && (
                                    <Flex
                                        onPress={() => {
                                            this.props.navigation.push('Financial', {
                                                parkinginfo: this.state.parkinginfo,
                                                parkingplanitem: this.state.parkingplanitem,
                                            });
                                        }}
                                        direction={'column'}>
                                        <Image style={styles.infoimage} source={require('~/assets/community/tu1.png')} />
                                        <Text style={styles.fontinfo}>零首付</Text>
                                    </Flex>
                                )}
                                {this.state.parkingplanitem.PayLoan === 1 && (
                                    <View style={{borderRightWidth: 0.3, width: 1, height: 55, borderColor: '#d3d3d3'}} />
                                )}
                                {this.state.parkingplanitem.PackageState === 1 && (
                                    <Flex
                                        onPress={() => {
                                            this.props.navigation.push('Gift', {
                                                parkinginfo: this.state.parkinginfo,
                                                parkingplanitem: this.state.parkingplanitem,
                                            });
                                        }}
                                        direction={'column'}>
                                        <Image style={styles.infoimage} source={require('~/assets/community/tu2.png')} />
                                        <Text style={styles.fontinfo}>拿{this.state.parkingplanitem.ParkagePriceW}万好礼</Text>
                                    </Flex>
                                )}
                                {this.state.parkingplanitem.PackageState === 1 && (
                                    <View style={{borderRightWidth: 0.3, width: 1, height: 55, borderColor: '#d3d3d3'}} />
                                )}
                                {this.state.parkingplanitem.CoinState === 1 && (
                                    <Flex
                                        onPress={() => {
                                            this.props.navigation.push('ParkGetMoney', {
                                                coinvalue: this.state.parkingplanitem.CoinValue,
                                            });
                                        }}
                                        direction={'column'}>
                                        <Image style={styles.infoimage} source={require('~/assets/community/tu3.png')} />
                                        <Text style={styles.fontinfo}>返{this.state.parkingplanitem.CoinValueW}万现金</Text>
                                    </Flex>
                                )}
                                {this.state.parkingplanitem.CoinState === 1 && (
                                    <View style={{borderRightWidth: 0.3, width: 1, height: 55, borderColor: '#d3d3d3'}} />
                                )}
                                {this.state.parkingplanitem.CarState === 1 && (
                                    <Flex
                                        onPress={() => {
                                            this.props.navigation.push('ParkGetCar', {
                                                parkingplancarID: this.state.parkingplanitem.ParkingPlanCarID,
                                            });
                                        }}
                                        direction={'column'}>
                                        <Image style={styles.infoimage} source={require('~/assets/community/tu4.png')} />
                                        <Text style={styles.fontinfo}>送{this.state.parkingplanitem.CarPriceW}万汽车</Text>
                                    </Flex>
                                )}
                                {this.state.parkingplanitem.CarState === 1 && (
                                    <View style={{borderRightWidth: 0.3, width: 1, height: 55, borderColor: '#d3d3d3'}} />
                                )}
                                <Flex
                                    onPress={() => {
                                        this.props.navigation.push('GetParkInfo');
                                    }}
                                    direction={'column'}>
                                    <Image style={styles.infoimage} source={require('~/assets/community/tu5.png')} />
                                    <Text style={styles.fontinfo}>得{this.state.parkinginfo.PriceSellW}万车位</Text>
                                </Flex>
                            </Flex>
                        </Card>
                    )}

                    <View style={{width: '92%', marginLeft: '4%', marginRight: '4%'}}>
                        {this.state.noticelist != '' && <Carouselcard noticelist={this.state.noticelist} />}
                    </View>
                    <View style={{width: '92%', marginLeft: '4%', marginRight: '4%', marginBottom: 10}}>
                        <Text
                            style={{
                                marginTop: 20,
                                fontSize: 16,
                            }}>
                            车位概况
                        </Text>
                        <Flex style={{width: '100%', marginTop: 10}}>
                            <Flex style={{width: '50%'}}>
                                <Text style={{fontSize: 14, color: '#999999'}}>车位长：</Text>
                                <Text style={{fontSize: 14}}>{this.state.parkinginfo.AreaLength}m</Text>
                            </Flex>
                            <Flex style={{width: '50%'}}>
                                <Text style={{fontSize: 14, color: '#999999'}}>车位宽：</Text>
                                <Text style={{fontSize: 14}}>{this.state.parkinginfo.AreaWidth}m</Text>
                            </Flex>
                        </Flex>
                        <Flex style={{width: '100%', marginTop: 10}}>
                            <Flex style={{width: '50%'}}>
                                <Text style={{fontSize: 14, color: '#999999'}}>建筑面积：</Text>
                                <Text style={{fontSize: 14}}>{this.state.parkinginfo.AreaBuilt}㎡</Text>
                            </Flex>
                            <Flex style={{width: '50%'}}>
                                <Text style={{fontSize: 14, color: '#999999'}}>使用面积：</Text>
                                <Text style={{fontSize: 14}}>{this.state.parkinginfo.AreaInner}㎡</Text>
                            </Flex>
                        </Flex>
                        {this.state.parkinginfo.BuyKind === 1 && (
                            <View
                                style={{
                                    width: '100%',
                                    height: 20,
                                    marginTop: 10,
                                }}>
                                <Text
                                    style={{
                                        color: '#EC4F46',
                                    }}>
                                    注：只能本小区人员购买
                                </Text>
                            </View>
                        )}
                    </View>
                </ScrollView>
                <Suspensions navigation={this.props.navigation} />
                {this.props.userinfo.identity === 8 && (
                    <Flex style={{width: '100%', height: 49}}>
                        <Flex
                            style={{
                                width: '20%',
                                height: 49,
                                backgroundColor: '#FFFFFF',
                            }}
                            justify={'center'}
                            align={'center'}
                            direction={'column'}
                            onPress={this.onPress}>
                            {this.state.favoritieschecked == false ? (
                                <Image style={{width: 19, height: 19}} source={require('~/assets/parkinfo/weishoucang2x.png')} />
                            ) : (
                                <Image style={{width: 19, height: 19}} source={require('~/assets/parkinfo/yishoucang2x.png')} />
                            )}
                            <Text style={{fontSize: 11, color: '#999999'}}>收藏</Text>
                        </Flex>
                        <Flex
                            style={{
                                width: '40%',
                                height: 49,
                                backgroundColor: '#F2BC38',
                            }}
                            align={'center'}
                            justify={'center'}>
                            <Text
                                style={{
                                    color: '#FFFFFF',
                                    fontSize: 15,
                                }}
                                onPress={() => {
                                    this.props.userinfo.token === ''
                                        ? this.props.navigation.push('Login')
                                        : this.props.navigation.push('Chat', {
                                              id: this.state.parkingid,
                                              route: 0,
                                          });
                                }}>
                                咨询开发商
                            </Text>
                        </Flex>
                        <Flex
                            style={{
                                width: '40%',
                                height: 49,
                                //backgroundColor: 'gray',
                                backgroundColor: '#EC4F46',
                                borderColor: '#EC4F46',
                            }}
                            align={'center'}
                            justify={'center'}>
                            {this.props.userinfo.token == '' ? (
                                <Text
                                    style={{
                                        color: '#FFFFFF',
                                        fontSize: 15,
                                    }}
                                    onPress={() => {
                                        this.props.navigation.push('Login');
                                    }}>
                                    我要购买
                                </Text>
                            ) : (
                                <Text
                                    style={{
                                        color: '#FFFFFF',
                                        fontSize: 15,
                                    }}
                                    onPress={this.seleonPress}>
                                    我要购买
                                </Text>
                            )}
                        </Flex>

                        {this.state.selectowner && (
                            <SelectOwnerHouse
                                parkinginfo={this.state.parkinginfo}
                                parkingplanitem={this.state.parkingplanitem}
                                ownerdataid={this.state.ownerdataid}
                                houseselectvisible={this.state.houseselectvisible}
                                confirmorder={(ownerhouseid) => {
                                    confirmorder(ownerhouseid);
                                }}
                                onparkSave={this.props.onparkSave}
                                onClose={this.onClose}
                                navigation={this.props.navigation}
                            />
                        )}
                    </Flex>
                )}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    text: {
        color: '#fff',
        fontSize: 36,
    },
    infoimage: {
        width: 35,
        height: 35,
    },
    fontinfo: {color: '#666666', fontSize: 10, paddingTop: 5},
    images: {
        width: '100%',
        height: 150,
        marginTop: 10,
    },
    images2: {
        width: '100%',
        height: 50,
        marginTop: 10,
    },
    textfenge: {
        width: '100%',
        backgroundColor: '#F6F6F6',
        height: 2,
        marginTop: 20,
    },
    info: {
        width: '92%',
        marginLeft: '4%',
        marginRight: '4%',
        marginTop: 15,
    },
});

export default connect(mapGetter, mapSetter)(ParkInfo);
